<script setup lang="ts">
import { computed, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { Icon } from '@iconify/vue';
import { $t } from '@/locales';

interface PasswordRule {
  text: string;
  valid: boolean;
}

interface Props {
  email: string;
  code: string;
}

interface Emits {
  (e: 'success', email: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const password = ref('');
const confirmPassword = ref('');
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const error = ref<string>('');
const loading = ref(false);

const message = useMessage();

const passwordRules = computed<PasswordRule[]>(() => [
  {
    text: '长度8-20个字符',
    valid: password.value.length >= 8 && password.value.length <= 20
  },
  {
    text: '包含字母',
    valid: /[a-zA-Z]/.test(password.value)
  },
  {
    text: '包含数字',
    valid: /\d/.test(password.value)
  }
]);

const isValid = computed(() => {
  return passwordRules.value.every(rule => rule.valid) && password.value === confirmPassword.value;
});

const handleSubmit = async () => {
  if (!isValid.value) {
    if (password.value !== confirmPassword.value) {
      message.error($t('common.password.not.match'));
      return;
    }
    message.error($t('common.please.check.value'));
    return;
  }

  loading.value = true;
  try {
    emit('success', props.email);
  } catch (err: unknown) {
    message.error(err instanceof Error ? err.message : $t('page.reset.password.failed'));
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="password-step">
    <NFormItem :label="$t('common.newPassword')">
      <NInput
        v-model:value="password"
        :type="showPassword ? 'text' : 'password'"
        :placeholder="$t('common.newPassword')"
        size="large"
        autocomplete="off"
        @keyup.enter="handleSubmit"
      >
        <template #suffix>
          <NButton text @click="showPassword = !showPassword">
            <NIcon size="18">
              <Icon v-if="showPassword" icon="mdi:eye" />
              <Icon v-else icon="mdi:eye-off" />
            </NIcon>
          </NButton>
        </template>
      </NInput>
    </NFormItem>

    <NFormItem :label="$t('common.confirmPassword')">
      <NInput
        v-model:value="confirmPassword"
        :type="showPassword ? 'text' : 'password'"
        :placeholder="$t('common.confirmPassword')"
        size="large"
        autocomplete="off"
        @keyup.enter="handleSubmit"
      >
        <template #suffix>
          <NButton text @click="showPassword = !showPassword">
            <NIcon size="18">
              <Icon v-if="showPassword" icon="mdi:eye" />
              <Icon v-else icon="mdi:eye-off" />
            </NIcon>
          </NButton>
        </template>
      </NInput>
    </NFormItem>

    <NCard class="mb-4" embedded>
      <p class="mb-2 text-sm text-gray-600">密码要求:</p>
      <NSpace vertical size="small">
        <div
          v-for="(rule, index) in passwordRules"
          :key="index"
          class="flex items-center text-sm"
          :class="rule.valid ? 'text-success' : 'text-gray-500'"
        >
          <div class="mr-2 h-1.5 w-1.5 rounded-full" :class="rule.valid ? 'bg-success' : 'bg-gray-400'" />
          {{ rule.text }}
        </div>
      </NSpace>
    </NCard>

    <NButton type="primary" block :disabled="!isValid || loading" :loading="loading" @click="handleSubmit">
      {{ $t('page.resetPassword.submit') }}
    </NButton>
  </div>
</template>
